<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
		}
		
		.box {
			width: 590px;
			margin: 100px auto;
			border: 1px solid blue;
		}
		
		.box header {
			height: 50px;
			line-height: 50px;
			text-align: center;
			color: #fff;
			background-color: #17A;
			padding: 0 10px;
		}
		
		.leftspan {
			float: left;
		}
		
		.leftyear {
			float: left;
			display: block;
			height: 50px;
			padding: 0px 5px;
			cursor: pointer;
		}
		
		.rightyear {
			float: right;
			display: block;
			height: 50px;
			padding: 0px 5px;
			cursor: pointer;
		}
		
		.rightspan {
			float: right;
		}
		
		.box header span {
			cursor: pointer;
		}
		
		header div {
			font-size: 35px;
		}
		
		.box table th,
		.box table td {
			height: 30px;
			text-align: center;
			border: 1px solid #ccc;
		}
		
		.box table td {
			padding: 0px 30px;
		}
		
		.box table {
			border: 1px solid #ccc;
			margin: 0 auto;
		}
		
		.red {
			color: red;
		}
		.active{
			background: red;
		}
	</style>
	</style>
	<script src="jquery3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function() {
			var date = new Date();
			
			
			$('header span').click(function() {
				var tds = $('tbody td');
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var idx = $(this).index(); //当前索引
				console.log(idx);
				if(idx === 1) {
					month--;
				} else if(idx === 2) {
					month++;
				}
				for (var i = 0; i < tds.length; i++) {
					$(tds[i]).removeClass('active');
				}
				date = new Date(year, month - 1);
				showDate(date);
			});

			$('header p').click(function() {
				var tds = $('tbody td');
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var idx2 = $(this).index();
				console.log(idx2);
				if(idx2 === 0) {
					year--;
				} else if(idx2 === 3) {
					year++;
				}
				for (var j = 0; j < tds.length; j++) {
					$(tds[j]).removeClass('active');
				}
				date = new Date(year, month - 1);
				showDate(date);
			})

			showDate(date);

			function showDate(date) {
				var tds = $('tbody td');
				tds.empty();
				var headerDiv = $('header div');
				var year = date.getFullYear();
				var month = date.getMonth() + 1; //0~11
				headerDiv.text(year + '年' + month + '月');

				//1号是星期几
				var date2 = new Date(year, month, 0);
				var days = date2.getDate(); //月份有几天
				console.log(days);
				date2 = new Date(year, month - 1, 1);
				var week = date2.getDay(); //0~6表示周日到周六  获取的是当月1号是星期几
				tds.eq(week).text(1);

				for(var i = 0; i < days; i++) {
					tds.eq(week + i).text(1 + i);
					
				}
				var date4=new Date();
				var rr = date4.getDate();
				var y=date4.getFullYear();
				var m=date4.getMonth()+1;
				if ($("header div").text() ==y+'年'+m+ '月') {
					for(var i = 0; i <tds.length; i++) {
						if(tds.eq(i).text() == rr) {//  当前日期价格背景色
							$(tds[i]).addClass('active');
						/*tds.eq(i).addClass('active');*/
					}/*else{
						tds.eq(i).removeClass('active');
					}*/
					}
				}
				//下空
				for(var j = 28, aa = 1; j < tds.length; j++) {
					if(tds.eq(j).text() === "") {
						tds.eq(j).text(aa++);
						tds.eq(j).css({
							color: 'red',
							background: 'blue'
						})

					} else {
						tds.eq(j).css({
							color: 'black',
							background: 'white'
						})
					}
				}

				//上空
				var date3 = new Date(year, month - 1, 0);
				var aas = date3.getDate(); //上月    天数

				for(var s = 6; s >= 0; s--) {
					if(tds.eq(s).text() === '') {
						tds.eq(s).text(aas--);
						tds.eq(s).css({
							color: 'red',
							background: 'blue'
						})
					} else {
						tds.eq(s).css({
							color: 'black',
							background: 'white'
						})
					}
				}

			}

		})
	</script>

	<body>
		<div class="box">
			<header>
				<p class="leftyear">上年</p>
				<span class="leftspan">上月</span>
				<span class="rightspan">下月</span>

				<p class="rightyear">下年</p>
				<div>
					2020年2月
				</div>
			</header>
			<table border="1px solid blue" cellspacing="0" cellpadding="">
				<thead>
					<tr>
						<th class="red">周日</th>
						<th>周一</th>
						<th>周二</th>
						<th>周三</th>
						<th>周四</th>
						<th>周五</th>
						<th>周六</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>1</td>
					</tr>
					<tr>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>1</td>
					</tr>
					<tr>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>1</td>
					</tr>
					<tr>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>1</td>
					</tr>
					<tr>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>1</td>
					</tr>
					<tr>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>1</td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>

</html>